<template>
  <view class="container">
    <view class="head">
      <image
          src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E8%BD%AE%E6%92%AD%E5%9B%BE/%E8%BD%AE%E6%92%AD1.png"
          class="image" mode="widthFix" @error="handleImageError"></image>
    </view>

    <!-- 小功能区域（第一排） -->
    <view class="function-row">
      <view class="function-item" @click="goToPrayPage">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E6%95%B0%E5%AD%97%E7%A5%88%E7%A6%8F.png"
            class="function-icon"></image>
        <text class="function-text">数字祈福</text>
      </view>

      <view class="function-item" @click="goToRouteSelection">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E7%BA%BF%E8%B7%AF%E9%80%89%E6%8B%A9.png"
            class="function-icon"></image>
        <text class="function-text">线路推荐</text>
      </view>
      <view class="function-item">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E6%99%AF%E5%8C%BA%E5%85%AC%E5%91%8A.png"
            class="function-icon"></image>
        <text class="function-text">景区公告</text>
      </view>
      <view class="function-item" @click="goToTicketing">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E9%97%A8%E7%A5%A8%E9%A2%84%E7%BA%A6.png"
            class="function-icon"></image>
        <text class="function-text">门票预约</text>
      </view>
    </view>

    <!-- 小功能区域（第二排） -->
    <view class="function-row">
      <view class="function-item">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E6%99%AF%E5%8C%BA%E5%AF%BC%E8%A7%88.png"
            class="function-icon"></image>
        <text class="function-text">景区导览</text>
      </view>
      <view class="function-item" @click="goToTemple">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E9%81%93%E6%95%99%E6%96%87%E5%8C%96.png"
            class="function-icon"></image>
        <text class="function-text">道教文化</text>
      </view>
      <view class="function-item" @click="goToDaowugong">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E9%9D%92%E5%9F%8E%E6%AD%A6%E5%8A%9F.png"
            class="function-icon"></image>
        <text class="function-text">青城武功</text>
      </view>
      <view class="function-item">
        <image
            src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E5%8A%9F%E8%83%BD%E5%8C%BA%E5%9F%9F/%E6%97%85%E6%B8%B8%E6%B8%B8%E8%AE%B0.png"
            class="function-icon"></image>
        <text class="function-text">旅游游记</text>
      </view>
    </view>

    <!-- 热门活动区域 -->
    <view class="hot-activity">
      <!-- 进行中活动 -->
      <view class="activity-item">
        <text class="activity-title">热门活动</text>
        <view class="ongoing-activity">
          <!-- <text class="activity-subtitle">进行中</text> -->
          <view class="activity-content" @click="goToStudyabroad">
            <image
                src="http://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E7%83%AD%E9%97%A8%E6%B4%BB%E5%8A%A8/PixPin_2025-05-28_22-54-46_compressed.png"
                class="activity-image"></image>
          </view>

        </view>

        <!-- 报名中活动 -->
        <view class="ongoing-activity">


        </view>
        <navigator url="/pages/wenchuang/wenchuang" class="activity-content">
          <image
              src="https://lbwnb123.oss-cn-beijing.aliyuncs.com/%E9%9D%92%E5%9F%8E/%E9%A6%96%E9%A1%B5/%E7%83%AD%E9%97%A8%E6%B4%BB%E5%8A%A8/Screenshot%202025-05-24%20175411.png"
              class="activity-image"></image>
        </navigator>
      </view>
    </view>
  </view>


</template>

<script>
export default {
  data() {
    return {};
  },
  methods: {
    // 跳转到祈福页面
    goToPrayPage() {
      uni.redirectTo({
        url: '/pages/praypage/praypage'
      });
    },
    //跳到道教文化界面
    goToTemple() {
      uni.redirectTo({
        url: '/pages/temple/temple'
      });
    },
    //调到青城武功界面
    goToDaowugong() {
      uni.redirectTo({
        url: '/pages/daowugong/daowugong'
      });
    },
    //跳转到购票页面
    goToTicketing() {
      uni.redirectTo({
        url: '/pages/ticketing/ticketing'
      });
    },
    goToStudyabroad() {
      uni.redirectTo({
        url: '/pages/studyabroad/studyabroad'
      });
    },
    //跳转到线路选择页面
    goToRouteSelection() {
      uni.redirectTo({
        url: '/pages/routeSelection/routeSelection'
      } );
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

}

.head {
  width: 100%;
}

.image {
  width: 100%;
  height: 100%;
  display: block;
}

.search-box {
  width: 90%;
  height: 100rpx;
  // background-color: #f5f5f5;
  border-radius: 10rpx;
  margin-top: 20rpx;
  display: flex;
  align-items: center;
  padding-left: 20rpx;
}

.search-text {
  font-size: 30rpx;
  color: #999;
}

.function-row {
  width: 90%;
  display: flex;
  justify-content: space-around;
  margin-top: 30rpx;
}

.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.function-icon {
  width: 60rpx;
  height: 60rpx;
  margin-bottom: 10rpx;
}

.function-text {
  font-size: 24rpx;
  color: #333;
}

.hot-activity {
  width: 90%;
  margin-top: 30rpx;
}

.activity-title {
  font-size: 36rpx;
  font-weight: bold;
  margin-bottom: 20rpx;
}

.ongoing-activity {
  margin-top: 15rpx;
  margin-bottom: 30rpx;
}

/* .activity-subtitle {
font-size: 30rpx;
font-weight: bold;
margin-bottom: 10rpx;
} */

.activity-content {
  display: flex;
  justify-content: center;
  align-items: center;
}

.activity-image {
  width: 90%;
  height: 150px;
  justify-content: center;
  // margin-right: 20rpx;
}

.activity-info {
  display: flex;
  flex-direction: column;
}

.activity-name {
  font-size: 30rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.activity-date {
  font-size: 24rpx;
  color: #666;
}

.join-button {
  width: 200rpx;
  height: 60rpx;
  background-color: pink;
  color: white;
  border-radius: 10rpx;
  margin-top: 20rpx;
}

.bottom-nav {
  width: 100%;
  height: 100rpx;
  background-color: #f5f5f5;
  display: flex;
  justify-content: space-around;
  align-items: center;
  position: fixed;
  bottom: 0;
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.nav-icon {
  width: 40rpx;
  height: 40rpx;
  margin-bottom: 10rpx;
}

.nav-text {
  font-size: 24rpx;
  color: #333;
}
</style>
